<template>
    <div class="remote_main_frame" @click="initBlock">
        <div class="main_content">
            <div class="main_content_left">
                <div class="author" :style="{backgroundColor:activeIdx==0?'#f5f5f5':'#fff'}" @click.stop="setActive(0)">
                    <div class="author_img">
                        <img src="static/image/screen/remote_direct.png" alt="">
                    </div>
                    <div class="author_tip">
                        <div class="tip_title" :style="{color:activeIdx==0?'#fa7500':'#333'}">直接远程</div>
                        <div class="tip_desc">被授权可免请求远程</div>
                    </div>
                    <div class="org_line" :style="{opacity:activeIdx==0?'1':'0'}"></div>
                </div>
                <div class="author" :style="{backgroundColor:activeIdx==1?'#f5f5f5':'#fff'}" @click.stop="setActive(1)">
                    <div class="author_img">
                        <img src="static/image/screen/remote_authorize.png" alt="">
                    </div>
                    <div class="author_tip">
                        <div class="tip_title" :style="{color:activeIdx==1?'#fa7500':'#333'}">授权远程</div>
                        <div class="tip_desc">授权免请求联系人</div>
                    </div>
                    <div class="org_line" :style="{opacity:activeIdx==1?'1':'0'}"></div>
                </div>
            </div>
            <div class="main_content_right">
                <div class="dir_remote" v-if="activeIdx == 0">
                    <div class="dir_title">直接远程列表</div>
                    <div class="dir_content">
                        <div class="no_info" v-if="defaultRemoteArr.length<=0">
                            <img src="static/image/screen/no_personnel.png" alt="">
                            <p>暂无远程信息</p>
                        </div>
                        <div class="dir_list" v-for="(group,index) in defaultRemoteArr" :key="`group_${index}`">
                            <div class="group_title" @click.stop="groupClick(index,group)" @contextmenu.stop.prevent="groupMenu(index,group,$event)">
                                <img :src="activeGroupIdx==group.TeamID?'static/image/screen/group_open.png':'static/image/screen/group_collect.png'" alt="">
                                <input type="text" :ref="`rename_${group.TeamID}`" v-if="showRename&&groupofRename==group.TeamID" @blur="inputBlur" v-model="renameinput" @keyup.enter="renameConfirm(group)" @click.stop >
                                <span v-else>{{group.TeamName}}</span>
                                <div class="group_opr" :ref="`group_opr_${group.TeamID}`" v-if="showgroupopr&&activeContext==index">
                                    <div class="opr_item" @click.stop="newGroup">新建分组</div>
                                    <div class="opr_item" @click.stop="renameGroup(group)" v-if="group.IsDefault!='0'">重命名</div>
                                    <div class="opr_item" v-if="group.IsDefault!='0'" @click.stop="deleteGroup(group)">删除分组</div>
                                </div>
                            </div>
                            <div class="group_content" v-if="activeGroupIdx==group.TeamID">
                                <div class="group_member" v-for="(member,idx) in remoteMembers" :key="idx">
                                    <div class="head_img">
                                        <img draggable="false" :src="`${$store.state.headPathUrl}${member.LoginID}${member.HeadImg}.PNG`"
                                        :onerror="defaultImg" @click.stop="showUserInfo(member,$event)" />
                                        <info-card  
                                        ref="infoCard" 
                                        v-if="member.LoginID==headId"
                                        :userInfo="userInfo">
                                        </info-card>
                                    </div>
                                    <div class="member_msg" @click.stop="showSwitch(member,$event)">
                                        <div class="member_name">{{member.Name}}</div>
                                        <div class="member_describe">{{member.Note?member.Note:''}}</div>
                                    </div>
                                    <div class="opr_box">
                                        <div class="opr_item" @click.stop="showDeviceInfo(member.LoginID)">
                                            <img src="static/image/screen/remote_device_information.png" alt="">
                                            <span>设备信息</span>
                                        </div>
                                        <div class="opr_item" @click.stop="dirRemote(member)">
                                            <img src="static/image/screen/remote_now.png" alt="">
                                            <span>立即远程</span>
                                        </div>
                                    </div>
                                    <div class="switch_box" :ref="`switch_box_${member.LoginID}`" v-if="member.LoginID==clickmemberid&&showSwitchGroup">
                                        <div class="box_p" @click.stop="moreShow=!moreShow">
                                            <span>移入分组</span>
                                            <img src="static/image/screen/group_more.png" alt="">
                                        </div>
                                        <div class="box_c" v-if="moreShow">
                                            <p :title="gp.TeamName" v-for="(gp,ix) in defaultRemoteArr" :key="ix" @click.stop="switchGroup(member,gp)">{{gp.TeamName}}<span style="color:#d5d5d5;font-size:12px;">{{member.TeamID==gp.TeamID?"(当前)":""}}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 新建分组 -->
                        <div class="dir_list"  v-if="showNewGroup">
                            <div class="group_title">
                                <img src="static/image/screen/group_collect.png" alt="">
                                <span><input @click.stop type="text" ref="newGropuInput" v-model="newGroupName" @blur="inputBlur" @keyup.enter="newGroupConfirm"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="auth_remote" v-if="activeIdx == 1">
                    <div class="auth_search">
                        <span>新增授权</span>
                        <div class="input_box">
                            <input type="text" ref="inputBox" v-model="inputValue" @keyup.enter="toSearch" placeholder="请输入需要授权的账号/姓名/手机号">
                            <div class="search_result" v-if="searchRes">
                                <div class="result_item" v-for="(user,num) in searchRes" :key="num" @click.stop="confirmuser(user)">
                                    <div class="user_name">
                                        <span v-html="$setKeyWords(user.name,[keywords],'#fa7500')"></span>
                                        <span v-if="user.departmentnames">(</span><span class="departments" :title="user.departmentnames" v-if="user.departmentnames" v-html="$setKeyWords(user.departmentnames,[keywords],'#fa7500')"></span><span v-if="user.departmentnames">)</span>
                                    </div>
                                    <div class="user_info">
                                        <span v-html="$setKeyWords(`账号：${user.id}`,[keywords],'#fa7500')"></span>
                                        <span v-if="user.mobile" v-html="$setKeyWords(`手机号：${user.mobile}`,[keywords],'#fa7500')"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button @click.stop="addAuth">立即新增</button>
                    </div>
                    <p style="padding-left:20px;line-height:40px;font-size:14px;color:#333;font-weight:bold;">已授权远程列表</p>
                    <div class="auth_content" style="height:calc(100% - 108px);overflow:scroll;" v-if="authMembers">
                        <div class="dir_list" style="padding:0 8px;">
                            <div class="group_content">
                                <div class="group_member" v-for="(member,idx) in authMembers" :key="idx">
                                    <div class="head_img">
                                        <img draggable="false" :src="`${$store.state.headPathUrl}${member.LoginID}${member.HeadImg}.PNG`"
                                        :onerror="defaultImg" @click.stop="showUserInfo(member,$event)" />
                                        <info-card  
                                        ref="infoCard" 
                                        v-if="member.LoginID==headId"
                                        :userInfo="userInfo">
                                        </info-card>
                                    </div>
                                    <div class="member_msg" style="cursor:default;">
                                        <div class="member_name">{{member.Name}}</div>
                                        <div class="member_describe">{{member.BeNote?member.BeNote:''}}</div>
                                    </div>
                                    <div class="opr_box">
                                        <div class="opr_item" style="border:none;color:#fa7500" @click.stop="cancelAuthClick(0,member)">
                                            <img src="static/image/screen/remote_remove_anthorized.png" alt="">
                                            <span>解除授权</span>
                                        </div>
                                    </div>
                                    <div class="confirm_box" v-if="showCnacelAuth&&member.LoginID==cancelAuthOne">
                                        <p>确定解除授权？</p>
                                        <div class="opr_btn">
                                            <button @click.stop="cancelAuthClick(2,member)">确定</button>
                                            <button @click.stop="cancelAuthClick(1)">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapMutations } from "vuex";
    import infoCard from "./info_card.vue"; //对方资料卡
    import {getUserInfo,getUsersStatus,getUserListInfoPage} from "@/api/remote"
    export default {
        components:{
            infoCard,
        },
        data(){
            return{
                inputValue:"",
                activeIdx:0,//当前激活的是直接远程还是授权远程
                activeGroupIdx:null,//当前激活的是哪个分组
                defaultImg: 'this.src="static/image/home/person_1.png"',//zk1224修改
                headId:null,
                userInfo:null,//点击展示详情
                showSwitchGroup:false,//显示分组调整
                clickmemberid:null,
                moreShow:false,
                showgroupopr:false,//显示组别操作
                showCnacelAuth:false,//显示解除授权
                cancelAuthOne:null,//解除谁
                activeContext:null,//右键谁
                showNewGroup:false,
                newGroupName:"",//新建分组的名字
                showRename:false,
                groupofRename:null,
                renameinput:"",
                searchRes:null,//查询结果
                keywords:'',//记录上一次搜索时的关键字
                authorUser:null,//要给谁授权
            }
        },
        computed:{
            ...mapState([
                "myInfo",
                'defaultRemoteArr',
                "remoteMembers",
                "authMembers"
            ]),
        },
        methods:{
            ...mapMutations(["setDefaultRemote","setRemoteMembers","setAuthMembers"]),
            confirmuser(user){//点击搜索出来的结果
                this.authorUser = user
                this.inputValue = user.name
                this.searchRes = null
            },
            dirRemote(user){//立即远程
                console.log(user,this.myInfo)
                let _this = this
                let status;
                getUsersStatus({ ids: user.LoginID }).then(success=>{
                    status = success.data[0].status
                    console.log(success,status)
                    if(status == '7'){
                        _this.$Message.warning("对方PC不在线")
                    }else{
                        let mydevice = this.$remoteControl("GetDeviceInfo",[_this.myInfo.id])//60
                        mydevice = JSON.parse(mydevice)
                        let mymac = mydevice.Data.MACAddress

                        let todevice = this.$remoteControl("GetDeviceInfo",[user.LoginID])//60
                        todevice = JSON.parse(todevice)
                        let tomac = todevice.Data.MACAddress
                        if(mymac == tomac){
                            console.log("无法远程控制同一台电脑1")
                            _this.$Message.warning("无法远程控制同一台电脑")
                        }else{
                            _this.$bus.$emit("dirRemote",1,user)//通知home开启远程
                        }
                    }
                })
            },
            renameGroup(group){
                console.log(group)
                this.showgroupopr = false;
                this.showRename = true;
                this.groupofRename = group.TeamID
                this.renameinput = group.TeamName
                this.$nextTick(()=>{
                    console.log(this.$refs[`rename_${group.TeamID}`])
                    this.$refs[`rename_${group.TeamID}`][0].focus()
                })
            },
            renameConfirm(group){
                let str = this.renameinput.trim()
                if(str){
                    let users = this.$remoteControl("RenameTeam",[group.TeamID,this.myInfo.id,str])//59
                    users = JSON.parse(users)
                    console.log("RenameTeam返回",users)
                    this.getDefaultRemoteArr();//新增之后重新查询
                }
                this.showRename = false;
                this.renameinput = ""
            },
            newGroup(){
                this.showgroupopr = false;
                this.showNewGroup = true;
                this.$nextTick(()=>{
                    this.$refs.newGropuInput.focus()
                })
            },
            deleteGroup(group){
                let info = this.$remoteControl("DeleteTeam",[group.TeamID,this.myInfo.id])//59
                info = JSON.parse(info)
                console.log("DeleteTeam返回",info)
                this.showgroupopr = false;
                this.getDefaultRemoteArr();//重新查询分组
                if(this.activeGroupIdx){//当前有分组正在展示，删组之后查当前展示的组的成员，更新变动
                    let users = this.$remoteControl("GetTeamDetails",[this.activeGroupIdx])
                    users = JSON.parse(users)
                    console.log(users)
                    this.setRemoteMembers(users.Data)
                }
            },
            switchGroup(member,group){
                console.log(member,group)
                if(member.TeamID != group.TeamID){//非当前所在分组
                    let info = this.$remoteControl("UpdateDeviceTeam",[member.LoginID,group.TeamID,member.TeamID])//59
                    info = JSON.parse(info)
                    console.log("DeleteTeam返回",info)
                    if(info.Result == '0'){
                        // remoteMembers
                        let info = this.$remoteControl("GetTeamDetails",[member.TeamID])//换分组之后重新查当前分组
                        info = JSON.parse(info)
                        console.log(info)
                        this.setRemoteMembers(info.Data)
                    }
                    this.showSwitchGroup = false;
                    this.moreShow = false;
                }
            },
            newGroupConfirm(){
                let str = this.newGroupName.trim()
                // console.log(this.newGroupName.trim())
                if(str){//有内容就新建
                    let users = this.$remoteControl("AddTeam",[this.myInfo.id,str,'1'])//59
                    users = JSON.parse(users)
                    console.log("AddTeam返回",users)
                    this.getDefaultRemoteArr();//新增之后重新查询
                    this.showNewGroup = false;
                    this.newGroupName = "";
                }else{//无内容就取消建组
                    this.showNewGroup = false;
                    this.newGroupName = "";
                }
            },
            inputBlur(){
                this.showNewGroup = false;
                this.newGroupName = "";

                this.showRename=false;
                this.groupofRename=null;
                this.renameinput = ""
            },
            cancelAuthClick(type,user){//type:0点击解除授权，1点击弹框取消,2授权确认
                if(type == 0){
                    this.showCnacelAuth = !this.showCnacelAuth
                    this.cancelAuthOne = user.LoginID
                }else if(type == 1){
                    this.showCnacelAuth = false
                    this.cancelAuthOne = null
                }else if(type == 2){
                    console.log(user,"解除谁的授权")
                    let info = this.$remoteControl("UnGrantAuthorization",[user.LoginID,this.myInfo.id])//64
                    info = JSON.parse(info)
                    console.log(info)
                    if(info.Result == '0'){
                        this.$Message.success("解除授权成功")
                        this.setActive(1)//解除授权成功更新变动
                    }else{
                        this.$Message.error(info.Msg)
                    }
                    this.showCnacelAuth = false
                    this.cancelAuthOne = null
                }
            },
            toSearch(){//搜索人
                let str = this.inputValue.trim()
                this.keywords = str;
                if(str){
                    getUserListInfoPage({
                        name: str,
                        pageSize: 30,
                        pageNumber: 1
                    }).then(res=>{
                        console.log(res)
                        if(res.result == 200){
                            this.searchRes = res.data
                            if(res.data.length<=0){
                                this.$Message.error('未找到相关人员，请重新输入')
                            }
                        }
                    })
                }else{
                    this.searchRes = null
                }
            },
            addAuth(){
                console.log(this.inputValue)
                let str = this.inputValue.trim()
                if(str && this.authorUser){
                    if(this.authorUser.id == this.myInfo.id){//给自己授权
                        this.$Message.error("不能给自己授权")
                    }else{
                        console.log('授权信息',this.authorUser.id,this.myInfo.id,this.authorUser.name,this.authorUser.head,this.authorUser.gender)
                        let users = this.$remoteControl("GrantAuthorization",[this.authorUser.id,this.myInfo.id,this.authorUser.name,this.authorUser.head,this.authorUser.gender])//64
                        users = JSON.parse(users)
                        console.log('查询返回',users)
                        if(users.Result == '0'){
                            this.$Message.success("授权成功")
                            this.setActive(1)//授权成功更新变动
                        }else{
                            this.$Message.error(users.Msg)
                        }
                    }
                }
                this.inputValue = ""
                this.authorUser = null
            },
            setActive(idx){
                this.activeIdx = idx;
                this.headId = null;
                if(idx == 0){
                    this.getDefaultRemoteArr();
                    this.initBlock()
                }else if(idx == 1){
                    let users = this.$remoteControl("GetBindUsers",[this.myInfo.id])//60
                    console.log(users)
                    users = JSON.parse(users)
                    console.log('GetBindUsers返回',users)
                    this.setAuthMembers(users.Data)
                }
            },
            getDefaultRemoteArr(){//zk129新增,获取默认的可远程人员
                let info = this.$remoteControl("GetTeam",[this.myInfo.id])//60
                console.log(info)
                info = JSON.parse(info)
                console.log('GetTeam返回',info)
                this.setDefaultRemote(info.Data)
            },
            showUserInfo(user,ev){
                console.log(user,"显示详细信息")
                this.initBlock()
                let _this = this;
                getUserInfo({
                    userid: user.LoginID
                }).then(res=>{
                    this.userInfo = {...res.data,...user}
                    console.log(this.userInfo,"查到的用户信息")
                    this.headId = user.LoginID//显示信息卡
                    this.$nextTick(()=>{
                        console.log(this.$refs.infoCard[0])
                        this.$refs.infoCard[0].setLAT(ev.offsetX,ev.offsetY)
                    })
                    console.log(res)
                })
                console.log(this.$store.state.personInfoList)

            },
            showDeviceInfo(id){
                let info = this.$remoteControl("GetDeviceInfo",[id])//60
                console.log(info)
                info = JSON.parse(info)
                console.log('GetTeam返回',info)
                this.$bus.$emit("showDeviceInfo",info.Data)//通知home页展示设备信息
            },
            showSwitch(user,ev){
                this.showSwitchGroup = true
                this.moreShow=false
                this.showgroupopr = false
                if(this.clickmemberid == user.LoginID){
                    this.showSwitchGroup = false
                    this.clickmemberid = null
                }
                if(this.showSwitchGroup){
                    this.clickmemberid = user.LoginID
                    this.$nextTick(()=>{
                        console.log(ev,this.$refs[`switch_box_${user.LoginID}`][0])
                        this.$refs[`switch_box_${user.LoginID}`][0].style.left=ev.offsetX+62+'px'
                        this.$refs[`switch_box_${user.LoginID}`][0].style.top=ev.offsetY+14+'px'
                    })
                }
            },
            groupClick(index,group){
                this.showSwitchGroup = false
                this.moreShow = false
                this.clickmemberid=null

                this.showgroupopr=false
                if(this.activeGroupIdx!=group.TeamID){
                    let info = this.$remoteControl("GetTeamDetails",[group.TeamID])//60
                    console.log(info)
                    info = JSON.parse(info)
                    console.log(info)
                    this.setRemoteMembers(info.Data)
                    let users = info.Data
                    for(let i in users){
                        this.$bus.$emit("downHeadImg",users[i])//通知home下载头像的方法
                    }
                    this.activeGroupIdx=group.TeamID
                    // console.log(group)
                }else{
                    this.activeGroupIdx=null
                }
            },
            groupMenu(index,group,ev){
                this.showSwitchGroup = false
                this.moreShow = false
                this.clickmemberid=null

                this.showgroupopr = true
                this.activeContext=index
                this.$nextTick(()=>{
                    console.log(ev,this.$refs[`group_opr_${group.TeamID}`][0])
                    this.$refs[`group_opr_${group.TeamID}`][0].style.left=ev.offsetX+'px'
                    this.$refs[`group_opr_${group.TeamID}`][0].style.top=ev.offsetY+'px'
                })
            },
            setNote(userid,newVal){//设置备注
                console.log(userid,newVal)
                this.$set(this.userInfo,'Note',newVal)
                for(let i in this.remoteMembers){
                    if(userid == this.remoteMembers[i].LoginID){
                        console.log(this.remoteMembers[i])
                        this.$set(this.remoteMembers,i,{...this.remoteMembers[i],Note:newVal})
                    }
                }
            },
             setBeNote(userid,newVal){//设置备注
                console.log(userid,newVal)
                this.$set(this.userInfo,'BeNote',newVal)
                for(let i in this.authMembers){
                    if(userid == this.authMembers[i].LoginID){
                        console.log(this.authMembers[i])
                        this.$set(this.authMembers,i,{...this.authMembers[i],BeNote:newVal})
                    }
                }
            },
            initBlock(){
                console.log("弹框隐藏")
                // this.activeGroupIdx = null;
                this.showSwitchGroup=false;//显示分组调整
                this.moreShow=false;
                this.clickmemberid=null;

                this.showgroupopr=false;//显示组别操作
                this.showCnacelAuth=false;//显示解除授权

                this.showNewGroup = false;
                this.newGroupName = "";

                this.showRename=false;
                this.groupofRename=null;
                this.renameinput = ""
            },

        },
        created(){    
            this.getDefaultRemoteArr()
            if(!this.$store.state.connectRemoteServer){
                this.$remoteControlConnect()
            }
        }
    }
</script>
<style lang="less" scoped>
    .remote_main_frame{
        width: 100%;
        height: 100%;
        display: flex;
        background-color: #f5f5f5;
        text-align: left;
        .main_content{
            flex: 1;
            margin: 16px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            .main_content_left{
                width: 232px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                background-color: #fff;
                border-radius: 10px;
                box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
                .author{
                    height: 80px;
                    margin: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 10px;
                    overflow: hidden;
                    cursor: pointer;
                    .author_img{
                        margin-left: 10px;
                    }
                    .author_tip{
                        flex: 1;
                        margin-left: 16px;
                        .tip_title{
                            font-size: 14px;
                            line-height: 14px;
                            font-weight: bold;
                        }
                        .tip_desc{
                            font-size: 12px;
                            line-height: 12px;
                            margin-top: 8px;
                            color: #999;
                        }
                    }
                    .org_line{
                        height: 100%;
                        width: 4px;
                        background-color: #fa7500;
                        opacity: 0;
                    }
                }
            }
            .main_content_right{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 240px;
                right: 0;
                overflow: hidden;
                background-color: #fff;
                border-radius: 10px;
                box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
                .dir_remote{
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    .dir_title{
                        padding-left: 20px;
                        font-size: 14px;
                        color: #333;
                        font-weight: bold;
                        height: 40px;
                        line-height: 40px;
                    }
                    .dir_content{
                        flex: 1;
                        position: relative;
                        padding-left: 10px;
                        overflow: scroll;
                        .no_info{
                            height: 110px;
                            width: 88px;
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            margin: auto;
                            text-align: center;
                            &>p{
                                font-size: 14px;
                                line-height: 14px;
                                margin-top: 6px;
                                color: #999;
                            }
                        }
                    }
                }
                .dir_remote .dir_list , .auth_remote .dir_list{
                    font-size: 14px;
                    color: #333;
                    .group_title{
                        line-height: 30px;
                        padding-left: 10px;
                        position: relative;
                        cursor: pointer;
                        .group_opr{
                            width: 120px;
                            max-height: 100px;
                            position: absolute;
                            top: 15px;
                            left: 100px;
                            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                            background-color: #fff;
                            z-index: 100;
                            border-radius: 4px;
                            font-size: 14px;
                            color: #333;
                            padding: 8px 0;
                            &>.opr_item{
                                line-height: 28px;
                                padding-left: 20px;
                                cursor: pointer;
                                &:hover{
                                    background-color: #f5f5f5;
                                    color: #fa7500;
                                }
                            }
                        }
                    }
                    .group_content{
                        .group_member{
                            position: relative;
                            display: flex;
                            align-items: center;
                            height: 60px;
                            overflow: visible;
                            &:hover{
                                background-color: #f5f5f5;
                            }
                            &:hover .opr_box{
                                display: flex;
                            }
                            .head_img{
                                width: 40px;
                                height: 40px;
                                margin-right: 12px;
                                margin-left: 10px;
                                position: relative;
                                cursor: pointer;
                                &>img{
                                    border-radius: 4px;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .member_msg{
                                // flex: 1;
                                width: 60%;
                                cursor: pointer;
                                .member_name{
                                    line-height: 14px;
                                }
                                .member_describe{
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-size: 12px;
                                    line-height: 12px;
                                    margin-top: 6px;
                                    color: #999;
                                }
                            }
                            .opr_box{
                                height: 16px;
                                line-height: 16px;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                margin: auto;
                                display: none;
                                .opr_item{
                                    padding: 0 20px;
                                    font-size: 12px;
                                    color: #fa7500;
                                    cursor: pointer;
                                    &:first-child{
                                        border-right: 1px solid #ccc;
                                        color: #198ff9;
                                    }
                                    &>img{
                                        width: 14px;
                                        height: 14px;
                                        margin-right: 6px;
                                        vertical-align: middle;
                                    }
                                }
                            }
                            .confirm_box{
                                position: absolute;
                                right: 12px;
                                top: 44px;
                                width: 150px;
                                height: 90px;
                                box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
                                background-color: #fff;
                                text-align: center;
                                font-size: 12px;
                                color: #333;
                                border-radius: 4px;
                                z-index: 100;
                                &>p{
                                    margin-top: 20px;
                                    font-size: 14px;
                                }
                                &>.opr_btn{
                                    margin-top: 15px;
                                    &>button{
                                        height: 24px;
                                        width: 48px;
                                        border:none;
                                        border-radius: 4px;
                                        outline: none;
                                        cursor: pointer;
                                        &:first-child{
                                            color: #fff;
                                            background-color: #fa7500;
                                        }
                                        &:last-child{
                                            border: 1px solid #ddd;
                                            box-sizing: border-box;
                                            background-color: #fff;
                                            margin-left: 10px;
                                        }
                                    }
                                }
                            }
                            .switch_box{
                                position: absolute;
                                width: 120px;
                                height: 44px;
                                padding: 8px 0;
                                background-color: #fff;
                                border-radius: 4px;
                                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                                z-index: 99;
                                .box_p{
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    // background-color: #f5f5f5;
                                    &:hover{
                                        background-color: #f5f5f5;
                                        color: #fa7500;
                                    }
                                    height: 100%;
                                    padding-left: 20px;
                                    padding-right: 6px;
                                    cursor: pointer;
                                    z-index: 99;
                                    &>img{
                                        height: auto;
                                    }
                                }
                                .box_c{
                                    background-color: #fff;
                                    padding: 8px 0;
                                    border-radius: 4px;
                                    position: absolute;
                                    left: 119px;
                                    top:0;
                                    min-width: 120px;
                                    max-width: 180px;
                                    // width: auto;
                                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                                    z-index: 99;
                                    &>p:hover{
                                        background-color: #f5f5f5;
                                        color: #fa7500;
                                    }
                                    &>p{
                                        width: 100%;
                                        padding-right: 20px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        cursor:pointer;
                                        font-size:14px;
                                        padding-left:20px;
                                        line-height:28px;
                                    }
                                }
                            }
                        }
                    }
                }
                .auth_remote{
                    height: 100%;
                    .auth_search{
                        height: 68px;
                        align-items: center;
                        padding-left: 20px;
                        border-bottom: 1px solid #e5e5e5;
                        box-sizing: border-box;
                        display: flex;
                        input , button{
                            height: 36px;
                            line-height: 36px;
                            vertical-align: middle;
                            border-radius: 4px;
                            border: none;
                            outline: none;
                        }
                        &>span{
                            font-size: 14px;
                            color: #333;
                            font-weight: bold;
                            white-space: nowrap;
                        }
                        .input_box{
                            position: relative;
                            &>input{
                                width: 320px;
                                outline: none;
                                border: 1px solid #ddd;
                                font-size: 14px;
                                padding-left: 16px;
                                margin-left: 20px;
                            }
                            .search_result{
                                position: absolute;
                                left: 20px;
                                top: 40px;
                                background-color: #fff;
                                width: 320px;
                                border-radius: 4px;
                                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                                z-index: 100;
                                padding-left: 16px;
                                max-height: 330px;
                                overflow-y: scroll;
                                .result_item{
                                    height: 66px;
                                    box-sizing: border-box;
                                    border-bottom: 1px solid #e5e5e5;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    cursor: pointer;
                                    .user_name{
                                        width: 100%;
                                        font-size: 14px;
                                        height: 14px;
                                        line-height: 14px;
                                        color: #333;
                                        white-space: nowrap;
                                        .departments{
                                            display: inline-block;
                                            vertical-align: middle;
                                            max-width: 55%;
                                            overflow: hidden;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                        }
                                    }
                                    .user_info{
                                        font-size: 12px;
                                        color: #999;
                                        margin-top: 10px;
                                        &>span:first-child{
                                            display: inline-block;
                                            width: 134px;
                                        }
                                    }
                                }
                                &>.result_item:last-child{
                                    border-bottom: none;
                                }
                            }
                        }
                        &>button{
                            margin-left: 20px;
                            color: #fff;
                            background-color: #fa7500;
                            width: 88px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }

    }
</style>